<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			
			table {
				background-color: skyblue;
				color: white;
				margin: 0 AUTO;
			}
			
			td {
				height: 100px;
				width: 100px;
				text-align: center;

			}
			
			td:hover {
				color: #999999;
				background-color: orange;
				cursor: pointer;
				font-size: 40px;
				color: black;
			}
			
			td.next {
				color: #black;
				background-color: red;
			}
			
			td.next:hover {
				color: red;
				background-color: burlywood;
				cursor: pointer;
			}
			th{line-height: 50px;}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			var nian = 2017;
			var yue = 3;
			var day = 0;
			var sumday = 0;
			var isrun = false;
			if(nian % 4 == 0 && nian % 100 != 0 || nian % 400 == 0) {
				isrun = true;
			}
			if(yue == 1 || yue == 3 || yue == 5 || yue == 7 || yue == 8 || yue == 10 || yue == 12) {
				day = 31;
			} else if(yue == 4 || yue == 6 || yue == 9 || yue == 11) {
				day = 30;
			} else if(yue == 2) {
				if(isrun) {
					day = 29;
				} else {
					day = 28;
				}
			}
			//求年份天数差
			for(var n = 1900; n < nian; n++) {
				if(n % 4 == 0 && n % 100 != 0 || n % 400 == 0) {
					sumday += 366;
				} else {
					sumday += 365;
				}
			}

			//月份天数差
			for(var y = 1; y < yue; y++) {
				switch(y) {
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12:
						sumday += 31;
						break;
					case 4:
					case 6:
					case 9:
					case 11:
						sumday += 30;
						break;
					case 2:
						//						if (isrun) {
						//							sumday+=29;
						//						}else{
						//							sumday+=28;
						//						}
						//条件运算符，三元运算符
						//  条件     ？ 真    ： 假 	
						sumday += isrun ? 29 : 28;
						break;
				}

			}

			var day1week = (sumday + 1) % 7;
			//判断上一个月有多少天
			//求出上一个月所在的年份
			var forwardYue = yue - 1;
			var forwardYear = nian;
			var forwardDay = 0; //上一个月天数
			if(forwardYue == 0) {
				forwardYue = 12;
				forwardYear = nian - 1;
			}
			//判断上一个月有多少天
			if(forwardYue == 2) {
				if(forwardYear % 4 == 0 && forwardYear % 100 != 0||forwardYear%400==0) {
							forwardDay=29;
				}else{
							forwardDay=28;
					
				}
			}else if(forwardYue==4||forwardYue==6||forwardYue==9||forwardYue==11){
				forwardDay=30;
				
			}else{
				forwardDay=31;
			}

			//打印
			document.write("<table border='1px'cellpadding='0'cellspacing='0'>");
			document.write("<tr><th colspan='7'>" + nian + "年" + yue + "月共" + day + "天<br />" + "</th></tr>")
			document.write("<tr><th >日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>")
			document.write("<tr>")
			//打印空的td
			var startDay=forwardDay-day1week+1;
			for(var i = 0; i < day1week; i++,startDay++) {
				document.write("<td class='next'>"+startDay+"</td>");
			}
			for(var i = 1; i <= day; i++) {
				if((day1week + i - 1) % 7 == 0 && i != 1) {
					document.write("<tr>");
				}
				document.write("<td>" + i + "</td>");
				if((day1week + i - 1) % 7 == 6) {
					document.write("</tr>");
				}

			}
			//不全最后一天最后的TD
			var day31week = (day1week + day - 1) % 7;
			for(var i = 1; i < 7 - day31week; i++) {
				document.write("<td class='next'>" + i + "</td>");
				//判断是否是最后一次
				if(i == 6 - day31week) {
					document.write("</tr>");

				}
			}
			document.write("</table>");
			
				var rili = wannianli(2018, 2);

			var nian = 2018;
			var yue = 2;

			window.onkeydown = function(event) {
				if(event.keyCode == 37) {
					//左键
					nian--;
				} else if(event.keyCode == 38) {
					//上键
					yue++;
					if(yue == 13) {
						yue = 1;
						nian++;

					}
				} else if(event.keyCode == 39) {
					//右键
					nian++;
				} else if(event.keyCode == 40) {
					//下键
					yue--;
					if(yue == 0) {
						yue = 12;
						nian--;
					}
				}
				wannianli(nian, yue);
			}

		</script>
	</body>

</html>